<template>
  <view class="profile-container">
    <!-- 顶部用户信息卡片 -->
    <up-card :title="userInfo.nickname" :thumb="userInfo.avatar" thumb-circle>
      <template #body>
        <view class="user-info">
          <text>ID: {{ userInfo.id }}</text>
          <text>等级: {{ userInfo.level }}</text>
        </view>
      </template>
    </up-card>

    <!-- 功能菜单列表 -->
    <up-cell-group>
      <up-cell
        v-for="item in menuList"
        :key="item.id"
        :title="item.title"
        :icon="item.icon"
        @click="handleMenuClick(item)"
      />
    </up-cell-group>

    <!-- 退出登录按钮 -->
    <view class="logout-btn">
      <up-button type="error" text="退出登录" @click="handleLogout" />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';

// 用户信息
const userInfo = ref({
  id: '10001',
  nickname: '张三',
  avatar:
    'https://env-00jxh6hdltnq.normal.cloudstatic.cn/66c894e9c390b34a069059d61724428629220?expire_at=1724432346&er_sign=406f6b402ca3cd05ea3cbed591495321',
  level: 'VIP 3',
});

// 菜单列表
const menuList = ref([
  {
    id: 1,
    title: '我的发布',
    icon: 'order',
  },
  {
    id: 2,
    title: '我的收藏',
    icon: 'star',
  },
  {
    id: 4,
    title: '账户设置',
    icon: 'setting',
  },
]);

// 页面显示时触发
onShow(() => {
  // 这里可以获取最新的用户信息
  // getUserInfo()
  userInfo.value = uni.getStorageSync('uni-id-pages-userInfo');
  if (Object.keys(userInfo.value).length === 0) {
    uni.navigateTo({
      url: '/uni_modules/uni-id-pages/pages/login/login-withpwd',
    });
  }
});

// 处理菜单点击
const handleMenuClick = (item) => {
  console.log('点击了菜单:', item.title);
  if (item.id === 4) {
    uni.navigateTo({
      url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo',
    });
  }
  // 根据item.id进行相应的页面跳转
  // uni.navigateTo({ url: `/pages/${item.id}/index` })
};

// 处理退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        console.log(
          JSON.stringify(uni.getStorageSync('uni-id-pages-userInfo')),
          'userino',
        );
        console.log('用户确认退出登录');
        uni.setStorageSync('uni-id-pages-userInfo', {});

        // 执行退出登录逻辑
        // logout()
      }
    },
  });
};
</script>

<style lang="scss" scoped>
.profile-container {
  padding: 20rpx;
  height: 100vh;
  background-color: #f8f8f8;

  .user-info {
    display: flex;
    flex-direction: column;
    font-size: 28rpx;
    color: #666;
  }

  .u-cell-group {
    margin-top: 30rpx;
    border-radius: 12rpx;
    overflow: hidden;
  }

  .logout-btn {
    margin-top: 50rpx;
    padding: 0 30rpx;
  }
}
</style>
